<template>
  <div>
    <h2>效果一: 显示TODO列表时, 已完成的TODO为绿色</h2>

    <List :todos="todos">
        <!-- 书写template -->
        <template slot-scope="todo">
          <span>数据格式为: {{todo}}</span>
          <h2 :style="{color:todo.todoItemObj.isComplete?'green':'black'}">{{todo.todoItemObj.text}}</h2>
        </template>
    </List>

    <hr>


    <h2>效果2.1: 显示TODO列表时, 带序号, TODO的颜色为蓝绿搭配(详细版)</h2>
    <List1 :dataArr="todos">
         <template slot-scope="todo">
           <span>数据格式为: {{todo}}</span>
         </template>
    </List1>


    <hr>


    <h2>效果2.2: 显示TODO列表时, 带序号, TODO的颜色为蓝绿搭配(也可以使用解构赋值)</h2>
    <List1 :dataArr="todos">
      <template slot-scope="{rowItem, indexNum}">
        <h1 :style="{color: rowItem.isComplete ? 'green' : 'hotpink' }">索引值{{indexNum}}---------{{rowItem.text}}</h1>
      </template>
    </List1>

  </div>
</template>

<script type="text/ecmascript-6">

  import List from './List';
  import List1 from './List1';

  export default {
    name: 'ScopeSlotTest',
    data () {
      return {
        todos: [
          {id: 1, text: 'AAA', isComplete: false},
          {id: 2, text: 'BBB', isComplete: true},
          {id: 3, text: 'CCC', isComplete: false},
          {id: 4, text: 'DDD', isComplete: false},
        ]
      }
    },

    components: {
      List,
      List1
    }
  }
</script>
